import { Button, DatePicker, Input, NavBar, Toast } from 'antd-mobile'
import Icon from '@/components/Icon'
import './index.scss'
import classNames from 'classnames'
import { billListData } from '@/constant'
import { useNavigate } from 'react-router-dom'
import { useMemo, useState } from 'react'
import { addBillList } from '@/store/modules/billStore'
import { useDispatch } from 'react-redux'
import dayjs from 'dayjs'

const New = () => {
  const navigate = useNavigate()
  // 1. 准备一个控制收入支出的状态
  const [billType, setBillType] = useState('pay') // pay 支出  income 收入

  // 收集金额
  const [money, setMoney] = useState('')
  const moneyChange = (value) => {
    setMoney(!+value ? '' : value)
  }

  // 收集账单类型
  const [useFor, setUseFor] = useState('')
  const dispatch = useDispatch()
  // 保存账单
  const saveBill = () => {
    if (!money) return Toast.show({ icon: 'fail', content: `请输入您${billType === 'pay' ? '支出' : '收入'}的金额` })
    if (useFor === '') return Toast.show({ icon: 'fail', content: `请选择${billType === 'pay' ? '支出' : '收入'}类型` })

    // 收集表单数据
    const data = {
      type: billType,
      money: billType === 'pay' ? -money : +money,
      date: date || new Date(),
      useFor,
    }
    console.log(data)
    dispatch(addBillList(data))
  }

  // 存储选择的时间
  const [date, setDate] = useState(() => {
    return new Date()
  })
  // 控制时间打开关闭
  const [dateVisible, setDateVisible] = useState(false)
  // 确认选择时间
  const dateConfirm = (value) => {
    console.log(value)
    setDate(value)
  }

  // 展示的时间
  const showDate = useMemo(() => {
    const nowDate = dayjs(new Date()).format('YYYY-MM-DD')
    const selectedDate = dayjs(date).format('YYYY-MM-DD')
    return nowDate === selectedDate ? '今天' : dayjs(date).format('YYYY-MM-DD')
  }, [date])

  return (
    <div className="keepAccounts">
      <NavBar className="nav" onBack={() => navigate(-1)}>
        记一笔
      </NavBar>

      <div className="header">
        <div className="kaType">
          <Button shape="rounded" className={classNames(billType === 'pay' && 'selected')} onClick={() => setBillType('pay')}>
            支出
          </Button>
          <Button className={classNames(billType === 'income' && 'selected')} shape="rounded" onClick={() => setBillType('income')}>
            收入
          </Button>
        </div>

        <div className="kaFormWrapper">
          <div className="kaForm">
            <div className="date" onClick={() => setDateVisible(true)}>
              <Icon type="calendar" className="icon" />
              <span className="text">{showDate}</span>
              <DatePicker className="kaDate" title="记账日期" max={new Date()} visible={dateVisible} onClose={() => setDateVisible(false)} onConfirm={dateConfirm} />
            </div>
            <div className="kaInput">
              <Input className="input" placeholder="0.00" type="number" value={money} onChange={moneyChange} />
              <span className="iconYuan">¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kaTypeList">
        {/* 数据区域 */}
        {billListData[billType].map((item) => {
          return (
            <div className="kaType" key={item.type}>
              <div className="title">{item.name}</div>
              <div className="list">
                {item.list.map((item) => {
                  return (
                    <div className={classNames('item', useFor === item.type && 'selected')} key={item.type} onClick={() => setUseFor(item.type)}>
                      <div className="icon">
                        <Icon type={item.type} />
                      </div>
                      <div className="text">{item.name}</div>
                    </div>
                  )
                })}
              </div>
            </div>
          )
        })}
      </div>

      <div className="btns">
        <Button className="btn save" onClick={saveBill}>
          保 存
        </Button>
      </div>
    </div>
  )
}

export default New
